/**
 * TMP001新增
 * */


var formArys = {
    title: '',
    imgs: [],
    attrs: []
}; //表单对象


//新增表单
function formAdd(){
    if (!vid) {
        msgPop({msg: '没有视频ID'}); return
    }
    var h = '';
    //标签名称
    h += '<div class="title">标签名称</div>';
    h += '<div class="group">';
    h += '<input type="text" placeholder="输入标签名" id="title" onclick="inputClick(this);" onblur="titleBlur();">';
    h += '</div>';
    //图片
    h += '<div class="title">图片上传';
    h += '<div id="uploadOut" style="margin: 10px; width: 90%; height: 35px; background: red; overflow: hidden;">';
    h += uploadHtml();
    h += '</div>';
    h += '</div>';
    h += '<div class="group" id="imgs">';
    h += '</div>';
    //自定义属性
    h += '<div class="title">属性设置';
    h += '<a href="javascript:;" class="groupMenu" onclick="keyPop();">加属性</a>';
    h += '</div>';
    h += '<div id="attrGroup">';
    //h += '<div class="attrOne">';
    //h += '<input type="text" value="111" readonly/>';
    //h += '<input type="text" value="111" readonly/>';
    //h += '<input type="button" value="删除"/>';
    //h += '</div>';
    h += '</div>';
    //按钮
    h += '<div id="tb-btn" onclick="formSave();">保存</div>';
    $('#form').html(h);
}


//点击激活
function inputClick(e){
    $('#' + e.id).addClass('click');
}


//失去激活
function titleBlur(){
    var title = $('#title');
    var val = title.val();
    title.removeClass('click');
    if (val != '') {
        formArys.title = val;
    }
    console.log(formArys);
}


//上传HTML
function uploadHtml(){
    var h = '';
    h += '<div style="padding: 10px 5%; width: 90%; background: #555; text-align: center; font-size: 12px; color: #fff; position: relative;">上传图片</div>';
    h += '<input type="file" id="uploadFile" style="width: 100%; height: 35px; opacity: 0; position: relative; top: -36px;" onchange="uploadImage()"/>';
    return h;
}


//图片HTML
function imgHtml(){
    var h = '';
    for (var i = 0; i < formArys.imgs.length; i ++) {
        h += '<div style="margin-bottom: 5px; width: 90%; overflow: hidden;">';
        h += '<img src="' + formArys.imgs[i] + '" style="width: 100%;"/>';
        h += '<a href="javascript:;" style="padding: 5px 5%; width: 90%; color: #fff; background: red; font-size: 12px; border: 0; border-radius: 0; opacity: 0.7; position: relative; top: -20px; left: 40%;" onclick="imgDel(' + i + ');">点击删除</a>';
        h += '</div>';
    }
    return h;
}


//显示图片
function showImg(e){
    if (formArys.imgs.length >= 9) {
        msgPop({msg: '最多上传9个图'}); return
    }
    formArys.imgs.push(e);
    //console.log(formArys.imgs);
    $('#imgs').html(imgHtml());
    $('#uploadOut').html(uploadHtml());
}


//删除图片
function imgDel(v){
    var newImgs = [];
    for (var i = 0; i < formArys.imgs.length; i ++) {
        if (i != v) {
            newImgs.push(formArys.imgs[i]);
        }
    }
    formArys.imgs = newImgs;
    $('#imgs').html(imgHtml());
}


//属性名弹窗
function keyPop(){
    var h = '';
    h += '<style type="text/css">#popOut{position: fixed; top: 35px; z-index: 100;} .popMask{width: '+cw+'px; height: ' + (ch - 35) + 'px; background: #000; opacity: 0.5; position: fixed; top: 35px; z-index: 100;} .popCnt{margin-top: ' + (ch * 0.1) + 'px; margin-left: ' + (cw * 0.1) + 'px; padding: 10px 5%; width: ' + (cw * 0.8 - 20) + 'px; background: #fff; border-radius: 5px; position: fixed; top: 10%; z-index: 100;} .popGroup{margin-top: 10px; font-size: 12px;} .popGroup input{margin: 5px 0; width: 90%; padding: 10px 5%; border: 1px solid #ccc; border-radius: 3px; font-size: 14px; outline-color: #0088cc;} .popBtn{margin: 10px 0;} .popBtn button{padding: 10px 0; width: 49%; border: 0; border-radius: 3px;  color: #fff;}</style>';
    h += '<div id="popOut">';
    h += '<div class="popMask"></div>';
    h += '<div class="popCnt">';
    h += '<div style="margin: 10px 0; text-align: center; color: #888;">新增属性<div/>';
    h += '<div class="popGroup">';
    h += '<input type="text" id="attrKey" placeholder="输入属性名"/>';
    h += '<input type="text" id="attrVal" placeholder="输入属性值"/>';
    h += '<div/>';
    h += '<div class="popBtn">';
    h += '<button style="background: coral;" onclick="$(\'#keyPop\').html(\'\');">取消</button>';
    h += ' <button style="background: #0088cc;" onclick="setKey();">保存属性</button>';
    h += '</div>';
    h += '</div>';
    h += '</div>';
    $('#keyPop').html(h);
}


//暂存属性key
function setKey(){
    var key = $('#attrKey').val();
    var val = $('#attrVal').val();
    if (key == '') {
        msgPop({msg: '属性名不能空'}); return
    }
    if (val == '') {
        msgPop({msg: '属性值不能空'}); return
    }
    formArys.attrs.push({attrKey: key, attrVal: val});
    getAttrHtml();
    $('#keyPop').html('');
    //console.log(formArys);
}


//删除指定属性
function delKey(key){
    if (formArys.attrs.length == 0) {
        msgPop({msg: '没有属性'});
        return
    }
    var attrArys = [];
    for (var i = 0; i < formArys.attrs.length; i++) {
        if (i != key) {
            attrArys.push(formArys.attrs[i]);
        }
    }
    formArys.attrs = attrArys;
    getAttrHtml();
    //console.log(formArys);
}


function getAttrHtml(){
    var d = formArys.attrs;
    var h = '', i = 0;
    for (; i < d.length; i ++) {
        h += '<div class="attrOne" id="attrid'+i+'">';
        h += '<input type="text" value="'+d[i].attrKey+'" readonly/>';
        h += '<input type="text" value="'+d[i].attrVal+'" readonly/>';
        h += '<input type="button" value="删除" onclick="delKey('+i+');"/>';
        h += '</div>';
    }
    $('#attrGroup').html(h);
}


//保存表单
function formSave(){
    if (token == '') {
        msgPop({msg: '没有登录'});
        window.location.href = '/login.html?code=' + code;
        return
    }
    if (formArys.title == '' && formArys.imgs.length == 0 && formArys.attrs.length == 0) {
        msgPop({msg: '没有提交数据'}); return
    }
    var formData = formArys;
    formData.code = code;
    formData.token = token;
    formData.videoId = vid;
    $.ajax({
        type: apis.tmp1Add.method,
        url: apis.tmp1Add.url,
        data: formArys,
        success: function (res) {
            console.log(res);
            if (res.code != 0) {
                msgPop({msg: res.msg});
                return
            }
            window.location.href = routes.tmp1Index + '?code=' + code + '&token=' + token;
        },
        error: function () {
            console.log('网络错误');
        }
    });
}